<template>
  <div class="common-layout">
    <el-container>
      <el-aside :class="isCollapse == true ? 'color_fff' : ''">
        <div
          class="logo"
          :style="
            isCollapse == true ? ' background: none;' : '  background: #fff;'
          "
        >
          <img src="../image/logo_s.png" alt="" />
          <div style="font-size: 16px">信号专业多模态大模型助手</div>
        </div>
        <el-menu
          mode="vertical"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#fff"
          active-text-color="#000"
          :collapse-transition="false"
          :style="isCollapse == true ? '' : 'background: none !important;'"
        >
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 20px 0px;
            "
          >
            <div
              v-if="isCollapse == false"
              style="font-size: 18px; font-weight: 600"
            >
              知识库大模型
            </div>
            <div style="font-size: 30px; text-align: right">
              <i
                :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                style="background: none"
                @click="isCollapse = !isCollapse"
              ></i>
            </div>
          </div>
          <!-- <el-menu-item index="/add">
            <i class="el-icon-plus"></i>
            <span slot="title">新建对话7865</span>
          </el-menu-item> -->
          <el-menu-item index="1">
            <i class="el-icon-plus"></i>
            <span slot="title">信号专业</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="margin-left: 300px; padding: 10px">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  created() {
    this.$router.push({ path: "/web" });
  },
};
</script>
<style>
.common-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-container {
  height: 100%;
  border: 1px soild red !important;
}
.el-aside {
  position: fixed;
  padding: 0 30px;
  height: 100%;
  border: none;
  background-color: #fff;
}
.color_fff {
  background-color: #f7f8fa;
}
.el-menu-vertical-demo {
  border: none;
  background-color: #fff;
}
.el-menu {
  background: none;
}
.el-menu-item {
  border-radius: 8px;
  border: none;
  font-size: 18px;
  font-family: "Inter";
  margin: 20px auto;
  background-color: #28c76c;
}
.el-button {
  border: none;
}
.logo {
  /* margin-left: 20px; */
  width: 240px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: -14px;
}
.logo div {
  margin-left: 4px;
}
.logo {
  font-family: Inter;
  font-size: 20px;
  /* font-weight: 00; */
  color: #2c3e50;
}
</style>
